
<template>
  <div class="introduct-content" style="padding-bottom:38px;">
    <p class="introduct-title"
      style="margin-bottom:28px;font-size: 20px;">
      {{ $t('guide.rights') }}
      <el-popover popper-class="app-pop"
        placement="bottom"
        width="180"
        trigger="hover"
        class="introduct-title-right">
        <img class="app-pop_img"
          src="@/assets/app-qr.png"
          alt="">
        <p class="app-pop_text">{{ $t('guide.scan') }}{{$t('guide.mobile')}}<br />{{ $t('guide.multi') }}{{ $t('guide.sync') }}</p>
        <span slot="reference">{{ $t('guide.mobile') }}</span>
      </el-popover>
    </p>

    <el-row :gutter="15">
      <el-col v-for="(it,i) in equitys"
        :key="i"
        :span="8">
        <div class="fun-item"
          :style="{background: it.bg}">
          <img class="fun-item_img"
            :src="it.icon"
            alt="" />
          <p class="fun-item_title">{{ it.title }}</p>
          <p class="fun-item_msg"
            v-html="it.msg"></p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      equitys: [{
        bg: 'linear-gradient(180deg, #65DCB1 0%, #36BCAF 100%)',
        icon: require('@/assets/introduct/fun-db.png'),
        title: this.$t('guide.sync'),
        msg: `${this.$t('guide.data')}<br/>${this.$t('guide.todos')}`
      }, {
        bg: 'linear-gradient(180deg, #70B1FB 0%, #00B8E6 100%)',
        icon: require('@/assets/introduct/fun-text.png'),
        title: this.$t('guide.picture'),
        msg: `${this.$t('guide.history')}<br/>${this.$t('guide.merge')}`
      }, {
        bg: 'linear-gradient(180deg, #FB9874 0%, #EE6C6C 100%)',
        icon: require('@/assets/introduct/fun-pdf.png'),
        title: this.$t('guide.pdf'),
        msg: `${this.$t('guide.tranform')}<br/>${this.$t('guide.word')}`
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.fun {
  &-item {
    height: 280px;
    padding: 35px 10px 10px;
    background: linear-gradient(180deg, #65dcb1 0%, #36bcaf 100%);
    border-radius: 8px;
    color: #ffffff;
    text-align: center;
    &_img {
      max-width: 100%;
      max-height: 120px;
    }
    &_title {
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0;
    }
    &_msg {
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
    }
  }
}
</style>
<style lang="scss">
.app-pop.el-popper {
  border: 0;
  background: linear-gradient(180deg, #ffffec 0%, #e4fffe 100%);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  .popper__arrow {
    display: block;
    border-bottom-color: rgba(0, 0, 0, 0.06);
    border-top-color: rgba(0, 0, 0, 0.06);
    &::after {
      border-bottom-color: #ffffeb;
      border-top-color: #e4fffe;
    }
  }
  .app-pop_img {
    width: 94px;
    height: 94px;
    margin: 10px auto;
    display: block;
  }
  .app-pop_text {
    margin-bottom: 10px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
</style>
